<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:pe="http://primefaces.org/ui/extensions"  
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>
            <h:outputText value="Sistema de Seguridad de Aplicaiones - SSA" />
        </title>
    </h:head>
    <h:body>
        <ui:composition template="/WEB-INF/facelets/templates/mainLayout.xhtml">            
            <ui:define name="menuPrincipal">
                <ui:include src="/frmMenu.xhtml"/>
            </ui:define>
             <ui:define name="content" >
                 <script type="text/javascript">
                     <!--
                      function isNumberKey(evt)
                      {
                         var charCode = (evt.which) ? evt.which : event.keyCode
                         if (charCode > 31 && (charCode < 48 || charCode > 57))
                            return false;

                         return true;
                      }
                      //-->
                </script>
                <p:blockUI block=":frmGestionarModulos:panBuscaModulos" trigger=":frmGestionarModulos:buscarButton" widgetVar="blkPanel">
                    Espere mientras se cargan los datos<br /> 
                    <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
                </p:blockUI>
                <p:blockUI block=":frmGestionarModulos:pnltree" trigger=":frmGestionarModulos:grdModulos" widgetVar="blkTreePanel">
                    Espere mientras se cargan los datos<br /> 
                    <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
                </p:blockUI>
                 <h:form id="frmGestionarModulos" onkeypress="if (event.keyCode == 13) return false;">
                     <p:growl showSummary="false" showDetail="true" id="msjFiltro"/>
                     <p:panel id="panModulos" header="Administración de Modulos" >
                         <table style="width:100%;" >
                            <tbody>
                                <tr>
                                    <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p:menubar style="width: 99%;" id="menuOpciones">
                                            <p:menuitem value="Nuevo" icon="ui-icon-person" actionListener="#{moduloController.nuevo}"
                                                        update=":dlgDetalleModulo, :frmDetalleModulo, msjFiltro" >
                                            </p:menuitem>
                                            <p:menuitem value="Modificar" icon="ui-icon-pencil" actionListener="#{moduloController.load}" 
                                                        update=":dlgDetalleModulo, :frmDetalleModulo, msjFiltro" >
                                            </p:menuitem>
                                            <p:menuitem value="Configurar Opciones" icon="ui-icon-wrench" actionListener="#{moduloController.abrirOpciones}"
                                                        update=":dlgGestionarOpciones, :frmGestionarOpciones, msjFiltro">
                                            </p:menuitem>
                                            <p:menuitem value="Limpiar" icon="ui-icon-trash" 
                                                        process="@this"
                                                        update=":frmGestionarModulos:pnltreeIns,:frmGestionarModulos:grdModulos,:frmGestionarModulos:txtBusModulo, msjFiltro"
                                                        actionListener="#{moduloController.loadInicialTree}">
                                            </p:menuitem>
                                            <p:menuitem value="Configurar Parámetros" icon="ui-icon-wrench" actionListener="#{moduloController.abrirParametros}"
                                                        update=":dlgGestionarParametro, :frmDetalleConfiguracion, msjFiltro">
                                            </p:menuitem>
                                        </p:menubar>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="float: left;width: 830px;height: 340px">
                                            <p:panel id="panBuscaModulos" style="width: 820px;height: 330px;margin-top: 4px;">
                                                <table style="width:100%" >
                                                    <thead>
                                                        <tr>
                                                            <td>
                                                                <p class="nota" style="text-align: justify;" >
                                                                    <span class="ui-icon ui-icon-info mensajeInfo" style="float: left;"></span>
                                                                    <label style="float: left;margin-left: 5px;">Para visualizar el árbol de modulos dar click sobre la fila seleccionada.</label>
                                                                </p>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <table style="width:55%" cellpadding="5" cellspacing="8">
                                                                    <tr>
                                                                        <td>
                                                                            <h:outputText value="Módulo :"/> 
                                                                        </td>
                                                                        <td>
                                                                            <p:inputText id="txtBusModulo" value="#{moduloController.txtBusquedaModulo}" style="width: 260px;" 
                                                                                         maxlength="250">
                                                                                <pe:keyFilter regEx="/[A-ZÑ0-9- ]/i"/>
                                                                            </p:inputText>
                                                                        </td>
                                                                        <td> 
                                                                            <p:commandButton process="@this, txtBusModulo" value="Buscar" icon="ui-icon-search"  id="buscarButton"
                                                                                             actionListener="#{moduloController.search}" 
                                                                                             update=":frmGestionarModulos:grdModulos, :frmGestionarModulos:pnltreeIns, :frmGestionarModulos:msjFiltro"/> 
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <span style="font-size: 13px;font-weight: bold;"> Listado de Módulos</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <div style="height: 230px; overflow-y: auto;overflow-x:hidden;">
                                                                    <p:dataTable id="grdModulos" var="item" 
                                                                                value="#{moduloController.lstModulo}" 
                                                                                rowKey="#{item.id}" scrollHeight="230"
                                                                                selection="#{moduloController.selectedModulo}" 
                                                                                selectionMode="single" paginator="false" 
                                                                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                                                rowsPerPageTemplate="5,10,15,20"
                                                                                emptyMessage="No se encontraron resultados."
                                                                                rowIndexVar="index"> 
                                                                       <p:ajax event="rowSelect" listener="#{moduloController.onRowSelect}"  
                                                                            update=":frmGestionarModulos:pnltreeIns, :frmGestionarModulos:grdModulos, :frmGestionarModulos:msjFiltro"  /> 
                                                                       <p:column width="50" style="text-align: center; width: 50px" >
                                                                           <f:facet name="header">
                                                                               <h:outputText value="Id"/>
                                                                           </f:facet>
                                                                           <div style="text-align: center;" > 
                                                                               <h:outputText value="#{item.id}" >
                                                                                   <f:convertNumber pattern="00000" />
                                                                               </h:outputText>
                                                                           </div>          
                                                                       </p:column>
                                                                       <p:column width="250" style="text-align: left; width: 250px" >
                                                                           <f:facet name="header">
                                                                               <h:outputText value="Modulo Padre"/>
                                                                           </f:facet>
                                                                           <h:outputText value="#{(item.nidModuloPadre!=null)?item.nidModuloPadre.txtModulo:'-'}" />
                                                                       </p:column>
                                                                       <p:column width="250" style="text-align: left; width: 250px">
                                                                           <f:facet name="header">
                                                                               <h:outputText value="Modulo"/>
                                                                           </f:facet>                                                
                                                                           <h:outputText value="#{item.txtModulo}" />                                                
                                                                       </p:column>
                                                                       <p:column style="text-align: center; width: 60px">
                                                                           <f:facet name="header">
                                                                               <h:outputText value="Activo"/>
                                                                           </f:facet>                                                
                                                                           <p:selectBooleanCheckbox disabled="true" value="#{item.flgActivo == '1'}"/>
                                                                       </p:column>
                                                                       <p:column  style="text-align: center; width: 100px">
                                                                           <f:facet name="header">
                                                                               <h:outputText value="Version"/>
                                                                           </f:facet>                                                
                                                                           <h:outputText value="#{item.txtVersion}" />                                                
                                                                       </p:column>
                                                                   </p:dataTable>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </p:panel>
                                        </div>
                                        <div style="height: 340px; width: 410px; overflow:hidden;float: right;">
                                            <h:panelGrid id="pnltree" style="width: 100%;height: 100%;">
                                                <h:panelGrid id="pnltreeIns" style="width: 100%;height: 100%;">
                                                <p:tree id="docTree" value="#{moduloController.moduloTree}" var="per" style="width: 400px;height: 333px;overflow:hidden;" 
                                                    selectionMode="single" selection="#{moduloController.selectedModuloNode}"
                                                    dynamic="true" > 
                                                    <p:treeNode expandedIcon="ui-icon-folder-open" 
                                                        collapsedIcon="ui-icon-folder-collapsed" > 
                                                        <h:outputText value="#{per.txtModulo}" /> 
                                                    </p:treeNode>  
                                                </p:tree>
                                                </h:panelGrid>
                                            </h:panelGrid>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                     </p:panel>
                     <p:remoteCommand name="abreConfirmacion" oncomplete="dlgConfirmacion.show()"></p:remoteCommand>
                     <p:remoteCommand name="abreConfirmacionAccion" oncomplete="dlgConfirmacionAccion.show()"></p:remoteCommand>
                     
                 </h:form>
                 <p:dialog id="dlgDetalleModulo" widgetVar="wDetalleModulo" modal="true" header="#{(moduloController.esNuevo)?'Registro de Módulo':'Modificar Módulo'}" resizable="false"
                           width="600" height="450" showEffect="clip" hideEffect="fold">
                     <ui:include src="DetalleModulo.xhtml"/>
                     <p:ajax event="close" update=":frmGestionarModulos:grdModulos, :frmGestionarModulos:pnltreeIns" listener="#{moduloController.listar}"/> 
                 </p:dialog>
                 
                 <p:dialog id="dlgGestionarOpciones" widgetVar="wGestionarOpciones" modal="true" header="Administración de Opciones del Modulo: #{opcionController.selectedModuloOpcion.txtModulo}" resizable="false"
                           width="1130" height="420" showEffect="clip" hideEffect="fold">
                     <ui:include src="GestionarOpciones.xhtml"/>
                     <p:ajax event="close" update=":frmGestionarModulos:grdModulos, :frmGestionarModulos:pnltreeIns"/> 
                 </p:dialog>
                 
                 <p:dialog id="dlgGestionarParametro" widgetVar="wGestionarParametro" modal="true" header="Configurar Parámetros" resizable="false"
                           width="350" height="280" showEffect="clip" hideEffect="fold" >
                     <h:form id="frmDetalleConfiguracion" onkeypress="if (event.keyCode == 13) return false;">
                         <p:panel id="panelConfiguracion" rendered="#{moduloController.selectedConfiguracion != null}"
                                  style="overflow: hidden;">
                             <table style="width: 95%;" cellspacing="10">
                                 <tr>
                                     <td style="width: 120px;"><h:outputLabel value="Tiempo de Sesión: " /></td>
                                     <td>
                                        <p:inputText id="txt1" value="#{moduloController.numTiempoSesion}" maxlength="3" 
                                                     style="width: 140px;margin-bottom: 4px;"/>
                                        <p:slider for="txt1" step="1" />
                                     </td>
                                     
                                 </tr>
                                 <tr>
                                    <td colspan="2">
                                        <table>
                                            <tr>
                                                <td style="vertical-align: top;"><span class="ui-icon ui-icon-info mensajeIcon" ></span></td>
                                                <td style="vertical-align: top;">El tiempo se encuentra expresado en minutos.</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                 <tr>
                                     <td><br/>
                                        <h:outputLabel value="Tiempo de Bloqueo sin Uso: " /></td>
                                     <td>
                                         <p:inputText id="txt2" value="#{moduloController.numTiempoBloqueoSinuso}" maxlength="3"
                                                      style="width: 140px;margin-bottom: 4px;"/>
                                         <p:slider for="txt2" step="1" />
                                     </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <table>
                                            <tr>
                                                <td style="vertical-align: top;"><span class="ui-icon ui-icon-info mensajeIcon" ></span></td>
                                                <td style="vertical-align: top;">El tiempo se encuentra expresado en días.</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <br/>
                                        <p:toolbar style="padding: 3px;width: 270px;">
                                            <p:toolbarGroup align="right">
                                                <p:commandButton value="Grabar" icon="ui-icon-disk" style="margin-right: 40px;"
                                                                 update=":frmGestionarModulos:msjFiltro" actionListener="#{moduloController.guardarConfiguracion}"/>
                                                <p:commandButton value="Cerrar" icon="ui-icon-close" process="@this" onclick="wGestionarParametro.hide()"/>
                                            </p:toolbarGroup>
                                        </p:toolbar>
                                    </td>
                                </tr>
                            </table>
                         </p:panel>
                     </h:form>
                 </p:dialog>
                 
                 <p:dialog id="dlgDetalleOpcion" widgetVar="wDetalleOpcion" modal="true" header="#{(opcionController.esNuevo)?'Registro de Opción':'Modificar Opción'}" resizable="false"
                          width="600" height="420" showEffect="clip" hideEffect="fold">
                    <ui:include src="DetalleOpcionModulo.xhtml"/>
                    <p:ajax event="close" update=":frmGestionarOpciones:grdOpciones, :frmGestionarOpciones:pnlOptreeIns" listener="#{opcionController.listar}"/> 
                </p:dialog>
                 
                <p:dialog id="dlgBuscaModulo" modal="true" header="Búsqueda de Modulo" 
                          widgetVar="buscaModulos" resizable="false"
                          width="410"  height="320"
                          showEffect="clip" hideEffect="fold">
                    <ui:include src="frmListarModulo.xhtml" />
                </p:dialog>
                 
                 <p:dialog id="dlgBuscaModuloOpcion" modal="true" header="Búsqueda de Opción" 
                          widgetVar="buscaOpcionModulo" resizable="false"
                          width="410"  height="320"
                          showEffect="clip" hideEffect="fold">
                    <ui:include src="frmListarModuloOpcion.xhtml" />
                </p:dialog>
                 
                 <p:dialog id="dlgGestionarAcciones" widgetVar="wGestionarAcciones" modal="true" header="Administración de Acciones de la Opción" resizable="false"
                           width="1130" height="560" showEffect="clip" hideEffect="fold">
                     <ui:include src="GestionarAcciones.xhtml"/>
                 </p:dialog>
                 
                 <p:dialog id="dlgDetalleAccion" widgetVar="wDetalleAccion" modal="true" header="#{(opcionController.esNuevo)?'Registro de Acción':'Modificar Acción'}" resizable="false"
                           width="600" height="300" showEffect="clip" hideEffect="fold">
                     <ui:include src="DetalleAccion.xhtml"/>
                     <p:ajax event="close" update=":frmGestionarAcciones:grdAcciones" listener="#{opcionController.listarAccionesDeOpcion}"/> 
                 </p:dialog>
                 
                 <p:dialog modal="true" header="Mensaje de Confirmación" widgetVar="dlgConfirmacion" resizable="false"
                          width="410" height="100" showEffect="clip" hideEffect="fold" id="dlgMensajeConfirmacion">
                        <p:panel>
                            <table>
                                <tbody>
                                    <tr>
                                        <td><span class="ui-icon ui-icon-alert ui-confirm-dialog-severity" style="margin-bottom: 10px;"></span>
                                            <h:outputLabel style="font-size: 10pt;" value="¿Desea replicar la opción/acción para los demás usuarios?"/>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td style="text-align: center;">
                                            <p:commandButton value="Sí" onclick="dlgConfirmacion.hide()" 
                                                             oncomplete="dlgConfirmacionOK.show()" process="@this"/>
                                            <p:commandButton value="No" onclick="dlgConfirmacion.hide()" process="@this"/>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>      
                        </p:panel>
                 </p:dialog>
                 <p:dialog modal="true" header="Mensaje de Confirmación" widgetVar="dlgConfirmacionOK" resizable="false"
                          width="200" height="100" showEffect="clip" hideEffect="fold" id="dlgMensajeConfirmacionOK">
                        <p:panel>
                            <table>
                                <tbody>
                                    <tr>
                                        <td><span class="ui-icon ui-icon-alert ui-confirm-dialog-severity" style="margin-bottom: 10px;"></span>
                                            <h:outputLabel style="font-size: 10pt;" value="¿Esta seguro?"/>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td style="text-align: center;">
                                            <p:commandButton value="Sí" process="@this" update=":frmGestionarModulos:msjFiltro"
                                                             actionListener="#{opcionController.actualizarEnCascada}"
                                                             oncomplete="dlgConfirmacionOK.hide()"/>
                                            <p:commandButton value="No" onclick="dlgConfirmacionOK.hide()" process="@this"/>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>      
                        </p:panel>
                 </p:dialog> 
                 
                 <p:dialog modal="true" header="Mensaje de Confirmación" widgetVar="dlgConfirmacionAccion" resizable="false"
                          width="410" height="100" showEffect="clip" hideEffect="fold" id="dlgMensajeConfirmacionAccion">
                        <p:panel>
                            <table>
                                <tbody>
                                    <tr>
                                        <td><span class="ui-icon ui-icon-alert ui-confirm-dialog-severity" style="margin-bottom: 10px;"></span>
                                            <h:outputLabel style="font-size: 10pt;" value="¿Desea replicar la acción para los demás usuarios?"/>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td style="text-align: center;">
                                            <p:commandButton value="Sí" onclick="dlgConfirmacionAccion.hide()" 
                                                             oncomplete="dlgConfirmacionAccionOK.show()" process="@this"/>
                                            <p:commandButton value="No" onclick="dlgConfirmacionAccion.hide()" process="@this"/>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>      
                        </p:panel>
                 </p:dialog>
                 <p:dialog modal="true" header="Mensaje de Confirmación" widgetVar="dlgConfirmacionAccionOK" resizable="false"
                          width="200" height="100" showEffect="clip" hideEffect="fold" id="dlgMensajeConfirmacionAccionOK">
                        <p:panel>
                            <table>
                                <tbody>
                                    <tr>
                                        <td><span class="ui-icon ui-icon-alert ui-confirm-dialog-severity" style="margin-bottom: 10px;"></span>
                                            <h:outputLabel style="font-size: 10pt;" value="¿Esta seguro?"/>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td style="text-align: center;">
                                            <p:commandButton value="Sí" process="@this" update=":frmGestionarModulos:msjFiltro"
                                                             actionListener="#{opcionController.actualizarAccionEnCascada}"
                                                             oncomplete="dlgConfirmacionAccionOK.hide()"/>
                                            <p:commandButton value="No" onclick="dlgConfirmacionAccionOK.hide()" process="@this"/>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>      
                        </p:panel>
                 </p:dialog>
             </ui:define>
        </ui:composition>
    </h:body>
</html>